<template>
    <div class="club-card" @click="clubDetail">
        <p>{{data.club_name}}  <van-tag plain round size="large">{{data.hits}}views</van-tag></p>
        <van-image :src="'/uploads'+data.thumb" fit="cover"></van-image>
    </div>
</template>
<script>
export default {
  name: 'clubcard',
  props: {
    data: Object
  },
  methods: {
    clubDetail () {
      // console.log('data.club_name :', this.data.club_name, this.data.id)
      if (typeof (this.data.id) !== 'undefined') {
        this.$root.$router.push({
          path: '/clubdetail',
          query: {
            id: this.data.id
          }
        })
      } else {
        this.$root.$router.push({
          path: '/clubdetail',
          query: {
            id: this.data.fan_id
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.club-card{
    padding: 0.5rem;
    border-bottom: 1px solid #ddd;
    margin: 0 5px;
}
.van-image{
    width: 100%;
    height: 15rem;
    border-radius: 5px;
    overflow: hidden;
}
.club-card>p:first-of-type{
    font-weight: 600;
    font-size: 1.2rem;
}
</style>
